<template>
  <view class="index"> 
  <!-- 这是轮播图区域 -->
   <swiper @change="fn1($event)"
	class="swiper" :circular="circular" :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval" :duration="duration">
<swiper-item v-for="(item,i) in arr2"  :key="i">
  <image class="imgs" :src="item"></image>
</swiper-item>

</swiper>
<!-- 这是搜索框的开始 --> 


  <navigator  url="/pages/rim/rim">
	  <view class="search">
	  	<view class="big">
	  		<view  :class= "{'active':currentIndex===i}" class="small" v-for="(item,i) in  arr2" :key="i"></view>
	  	</view>
	  	<image class="img1"  src="../../static/image/3.png"></image>
	  	<text class="title">搜美食,菜谱</text>
	  	
	  </view>
  </navigator>   

<!-- 这是search  分类区域的开始 -->
<view class="searchinfo">
	<view>
		<image  class="imgs" src="../../static/image/5.png"></image>
		<view>餐宴</view>
	</view>
	<view>
		<image  class="imgs" src="../../static/image/7.png"></image>
		<view>名厨</view>
	</view>
	<view>
		<image   class="imgs" src="../../static/image/4.png"></image>
		<view>贝贝颜</view>
	</view>
	<view>
		<image   class="imgs"  src="../../static/image/6.png"></image>
		<view>餐饮周边</view>
	</view>
</view>
<!-- 这是 banner区域的开始 -->
<view class="banner">
	
	<image class="banner_img" src="../../static/image/8.png">
		
	</image>
</view>
<!-- 这是优选名厨的区域的开始 -->
<view class="out">
  <view class="top">
  	 <image class="img" src="../../static/image/9.png"></image>
  </view>
  <!-- <!这是中间区域 -->
  <scroll-view  :scroll-x="true"  :enable-flex="true"  class="center">
	
	  <WellChef v-for="item in listData" :key="item.id" :list1="item" :value="value"></WellChef>
	
  </scroll-view>
  <!-- 这是更多名厨区域的开始 -->
  <view id="bottom">
	   更多名厨
  </view>
</view>
<!-- 这是优选餐宴区域的开始 -->
 <view class="preferred">
	 <view class="preferred_top">
		 <image  class="preferred_img" src="../../static/image/10.png"></image>
	 </view>
	 <!-- 这是下方滚动区域的开始 -->
	  <scroll-view  :enable-flex="true" :scroll-x="true" class="preferred_content">
		 <Preferred v-for="item in listData2" :key="item.id" :list2="item"></Preferred>
	  </scroll-view>
	 
 </view>
<!-- 这是优选餐宴区域的结束 -->
<!-- 这是 后续服务的开始 -->
<view class="serve">	
  <view class="serve_child">
	  <image  class="imgs" src="../../static/image/13.png"></image>
	  <view class="inner">
		  <view class="title">信用保障</view>
		    <view class="title2">服务到位,时间准时</view>
	  </view>
  </view>
  <view class="serve_child">
  	  <image  class="imgs"  src="../../static/image/14.png"></image>
  	  <view class="inner">
  		  <view class="title">信用保障</view>
  		    <view class="title2">服务到位,时间准时</view>
  	  </view>
  </view>
  <view class="serve_child">
  	  <image  class="imgs" src="../../static/image/15.png"></image>
  	  <view class="inner">
  		  <view class="title">信用保障</view>
  		    <view class="title2">服务到位,时间准时</view>
  	  </view>
  </view>
  <view class="serve_child">
  	  <image  class="imgs" src="../../static/image/16.png"></image>
  	  <view class="inner">
  		  <view class="title">信用保障</view>
  		    <view class="title2">服务到位,时间准时</view>
  	  </view>
  </view>
</view>
<!-- 这是后续服务的结束 -->
<!-- 这是最下面的图片区域的开始 -->
<view class="introduce">
	
	<image class="img"  src="../../static/image/gg.jpg"></image>
</view>
<!-- 这是下面的图片区域的结束 -->
  </view>
</template>

<script>
	import  WellChef from '../../components/wellChef.vue'
	import  Preferred from '../../components/preferred.vue'
	export default {
		components:{
			WellChef,
			Preferred
		},
		  onShareAppMessage(res) {
		    // if (res.from === 'button') {// 来自页面内分享按钮
		    //   console.log(res.target)
		    // }
			console.log(res)
		    return {
		      title: '小小鱼',
		      path: '/pages/index/index'
		    }
		  },
	    data() {
	        return {
				value:'3',
	           
				arr2:[
					'../../static/image/goods1.jpg',
					'../../static/image/goods2.jpg',
					'../../static/image/goods3.jpg'
				],
	            indicatorDots: true,
	            autoplay: true,
	            interval: 2000,
				circular:true,
	            duration: 500,
				currentIndex:'',
				listData:[
					{id:1,imgUrl:'../static/image/man1.jpg',name:"张三"},
					{id:2,imgUrl:'../static/image/man2.jpg',name:"李四"},
					{id:3,imgUrl:'../static/image/man2.jpg',name:"赵六"},
					{id:4,imgUrl:'../static/image/man2.jpg',name:"王五"},
				],
				listData2:[
					{id:1,imgUrl:'../static/image/man1.jpg',name:"张三"},
					{id:2,imgUrl:'../static/image/man2.jpg',name:"李四"},
					{id:3,imgUrl:'../static/image/man2.jpg',name:"赵六"},
					{id:4,imgUrl:'../static/image/man2.jpg',name:"王五"},
					{id:4,imgUrl:'../static/image/man2.jpg',name:"田七"},
				],
	        }
	    },
		methods:{
			fn1(event){
				this.currentIndex=event.detail.current
			},
			// 这是评分
			   // onChange(e) {
			   //          console.log('rate发生改变:' + JSON.stringify(e))
			   //      }
		}
		}
</script>

<style lang="less" scoped>
	// 这是商家介绍区域的开始
	.introduce{
		width: 750rpx;
		height: 400rpx;
		margin-top: 20px;
		margin-bottom: 20px;
		.img{
			width: 750rpx;
			 height: 400rpx;
		}
		
	}
	// 这是后续服务的开始
	.serve{
		display: flex;
		flex-wrap:wrap;
		box-sizing: border-box;
		box-shadow: 2px  -2px 5px #ccc;
		.serve_child{
			flex: 0 0 375rpx;
			height: 75px;
			display: flex;
			align-items: center;
				box-sizing: border-box;
			&{
					border-bottom: 1px solid #eee;
			}
			&:nth-of-type(1){
				border-right: 1px solid #eee;
			
			}
			
			&:nth-of-type(3){
				border-right: 1px solid #eee;
				
			}
			.title{
				font-size:16px;
				font-weight: bold;
			}
			.title2{
				font-size:12px;
				color: #666;
			
			}
			.imgs{
				width: 30px;
				height: 30px;
				margin-left: 15px;
				margin-right: 10px;
			}
		}
	}
	// 这是轮播图区域
	.swiper{
		width:750rpx;
		.imgs{
			 width:750rpx;
		}
	}
	.banner{
		width: 700rpx;
		height: 300rpx;
		margin: 20px  auto;
		.banner_img{
			width:700rpx;
			height: 300rpx;
			
		}
	}
	.searchinfo{
		display:flex;
		justify-content: space-around;
		view{
		display:flex;
		flex-direction: column;
		justify-content: center;
			align-items: center;
		}
		 .imgs{
			width:50px;
			height:50px;
		}
	}
	.search{
		width: 700rpx;
		margin:   0  auto ;
		position: relative;
		top: -20px;
		background-color: white;
		height: 50px;
		border-radius: 25px;
		display: flex;
		justify-content: center;
		align-items: center;
		box-shadow:2px  2px 5px #ccc;
		
		.img1{
			width: 15px;
			height: 15px;
			color: #f20;
			
		}
		.title{
	       font-size:15px;
		   color:#666;
		}
			
			
	}
	.big{
		position: absolute;
		top: -15px;
		width: 700rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		.small{
			width: 8px;
			height: 8px;
			margin-right:8px;
			border-radius:50%;
			background-color: #333;
			&.active{
			background-color: white;
			}
		}
	}
	#bottom{
		width: 750rpx;
		font-size: 14px;
		text-align: center;
		color: #666;
	}
.out{
	.top{
		width: 700rpx;
		margin: 0 auto;
		text-align: center;
		  height: 100rpx;
		.img{ 
			width: 600rpx;
		  height: 100rpx;
				}
		
	}
	.center{
		width: 750rpx;
		display: flex;
		height: 150px;
		margin-top: 20px;
		 // padding-top: 10px;
		  box-sizing: border-box;
		//  padding-right: 20px;
	//	white-space: nowrap;
    	flex-wrap:nowrap;
		#bottom{
			width: 750rpx;
			font-size: 100px;
			text-align: center;
		}
		
	}
	
}	
.preferred{
	margin-top: 20px;
	.preferred_top{
			width: 700rpx;
			margin: 0 auto;
			text-align: center;
			 height: 100rpx;
		.preferred_img{ 
			width: 600rpx;
			height: 50rpx;
						}
		
	}	
	.preferred_content{
		
		    width: 750rpx;
			display: flex;
			height: 150px;
			 // padding-top: 10px;
			  box-sizing: border-box;
			//  padding-right: 20px;
		//	white-space: nowrap;
			flex-wrap:nowrap;
		
	}
	
}


</style>
